import React, { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import {
  EnvelopeIcon,
  CheckCircleIcon,
  ExclamationTriangleIcon,
  ArrowPathIcon
} from '@heroicons/react/24/outline'
import { Card, Button } from '@/components/ui'
import { ErrorBoundary } from '@/components/common'
import { authService } from '@/services/api/authService'

export const VerifyEmailPage: React.FC = () => {
  const location = useLocation()
  
  const [isResending, setIsResending] = useState(false)
  const [resendSuccess, setResendSuccess] = useState(false)
  const [resendError, setResendError] = useState<string | null>(null)

  const email = location.state?.email || 'your email'

  const handleResendEmail = async () => {
    setIsResending(true)
    setResendError(null)
    setResendSuccess(false)

    try {
      await authService.resendVerificationEmail()
      setResendSuccess(true)
    } catch (error) {
      setResendError('Failed to resend verification email. Please try again.')
    } finally {
      setIsResending(false)
    }
  }

  return (
    <ErrorBoundary>
      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full">
          <Card className="p-8 text-center">
            <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
              <EnvelopeIcon className="h-8 w-8 text-blue-600" />
            </div>

            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              Check your email
            </h2>

            <p className="text-gray-600 mb-6">
              We've sent a verification link to{' '}
              <span className="font-medium text-gray-900">{email}</span>
            </p>

            <div className="space-y-4">
              <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
                <div className="flex items-start">
                  <CheckCircleIcon className="h-5 w-5 text-blue-400 mt-0.5 mr-3 flex-shrink-0" />
                  <div className="text-sm text-blue-700">
                    <p className="font-medium mb-1">Next steps:</p>
                    <ol className="list-decimal list-inside space-y-1 text-left">
                      <li>Check your email inbox</li>
                      <li>Click the verification link</li>
                      <li>Return here to sign in</li>
                    </ol>
                  </div>
                </div>
              </div>

              {resendSuccess && (
                <div className="bg-green-50 border border-green-200 rounded-md p-4">
                  <div className="flex items-center">
                    <CheckCircleIcon className="h-5 w-5 text-green-400 mr-3" />
                    <p className="text-sm text-green-700">
                      Verification email sent successfully!
                    </p>
                  </div>
                </div>
              )}

              {resendError && (
                <div className="bg-red-50 border border-red-200 rounded-md p-4">
                  <div className="flex items-center">
                    <ExclamationTriangleIcon className="h-5 w-5 text-red-400 mr-3" />
                    <p className="text-sm text-red-700">{resendError}</p>
                  </div>
                </div>
              )}

              <div className="space-y-3">
                <Button
                  onClick={handleResendEmail}
                  loading={isResending}
                  disabled={isResending || resendSuccess}
                  variant="outline"
                  fullWidth
                  icon={<ArrowPathIcon />}
                >
                  {resendSuccess ? 'Email Sent' : 'Resend verification email'}
                </Button>

                <Button
                  as={Link}
                  to="/auth/login"
                  variant="primary"
                  fullWidth
                >
                  Continue to Sign In
                </Button>
              </div>

              <div className="text-sm text-gray-500">
                <p>Didn't receive the email? Check your spam folder or</p>
                <Link
                  to="/auth/register"
                  className="text-primary-600 hover:text-primary-500 font-medium"
                >
                  try a different email address
                </Link>
              </div>
            </div>
          </Card>

          <div className="mt-8 text-center">
            <p className="text-xs text-gray-500">
              Need help?{' '}
              <Link to="/support" className="text-primary-600 hover:text-primary-500">
                Contact Support
              </Link>
            </p>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  )
}
